<template>
    <div>
        <h2>Home:</h2>
        <p>{{ info.name }}</p>
        <p>{{ readonlyInfo.name }}</p>
        <button @click="changeName">修改info的name</button>
        <button @click="changeName2">修改readonlyInfo的name</button>
    </div>
</template>

<script>
export default {
    props: {
        info: {
            type: Object,
            default: () => ({})
        },
        readonlyInfo: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const changeName = () => {
            props.info.name = "home"
        }
        const changeName2 = () => {
            props.readonlyInfo.name = "home22"
        }
        return {
            changeName,
            changeName2
        }
    }
}
</script>

<style lang="scss" scoped>
</style>